<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 面板标题 -->
		<div class="panel-heading text-left">
			<a href="javascript:void(0)">修改密码</a>
		</div>
		<!-- 面板主体 -->
		<div class="panel-body">
			<form class="form form-horizontal  col-md-push-1 col-md-10 ">
				<!-- 原密码 -->
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="oldUpsw">原密码：</label>
					</div>
					<div class="col-md-4">
						<input type="password" name="oldUpsw" id="oldUpsw"
							onblur="checkOldUpsw()" placeholder="请输入原密码" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="oldUpswMsg">&nbsp;</span>
					</div>
				</div>
				<!-- 新密码 -->
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="upsw">新密码：</label>
					</div>
					<div class="col-md-4">
						<input type="password" name="upsw" id="upsw" onblur="checkUpsw()"
							placeholder="请输入新密码" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="upswMsg">&nbsp;</span>
					</div>
				</div>
				<!-- 确认密码 -->
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="confirmpsw">确认密码：</label>
					</div>
					<div class="col-md-4">
						<input type="password" name="confirmpsw" id="confirmpsw"
							onblur="checkConfirmpsw()" placeholder="请输入新密码"
							class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="confirmpswMsg">&nbsp;</span>
					</div>
				</div>
				<!-- 按钮-->
				<div class="form-group col-md-6">
					<button type="button" class="btn btn-mk btn-success"
						onclick="updateUpsw()">保存</button>
					<button type="reset" class="btn btn-mk btn-warning">重置</button>
				</div>
			</form>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	//修改密码
	function updateUpsw() {
		if (checkOldUpsw() && checkUpsw() && checkConfirmpsw()) {
			$.ajax({
				url : "../user",
				type : "post",
				data : {
					"opr" : "updateUpsw",
					"oldUpsw" : $("#oldUpsw").val(),
					"upsw" : $("#upsw").val()
				},
				dataType : "json",
				success : function(result) {
					if (result.msg == "ok") {
						alert("密码修改成功,请重新登录！");
						location.href = "login.jsp";
					} else if (result.msg == "null") {
						alert("请重新登录！");
						location.href = "login.jsp";
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查旧密码是否吻合
	function checkOldUpsw() {
		if ($("#oldUpsw").val() == "${loginUser.upsw}") {
			$("#oldUpswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#oldUpswMsg").html("<font color='red'>原密码错误。</font>");
			return false;
		}
	}

	//检查新密码格式是否正确
	function checkUpsw() {
		let zz = /^[a-zA-Z0-9]{6,20}$/;
		let upswVal = $("#upsw").val();
		if (zz.test(upswVal)) {
			$("#upswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#upswMsg").html(
					"<font color='red'>密码由字母和数字组成，长度必须在6-20位之间。</font>");
			return false;
		}
	}

	//检查两个密码是否相等
	function checkConfirmpsw() {
		let upswVal = $("#upsw").val();
		let confirmpswVal = $("#confirmpsw").val();
		if (upswVal == confirmpswVal) {
			$("#confirmpswMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#confirmpswMsg").html("<font color='red'>两次密码不一致。</font>");
			return false;
		}
	}
</script>
</html>
